<template>
  <div class="withdrawAdmin">
    <a-card>
      <main>
        <section>
          <div>
            <p>已提现金额</p>
            <p>{{settledAmount}}</p>
          </div>
          <div>
            <p>可提现金额</p>
            <p>{{accountBalance}}</p>
          </div>
        </section>
        <a-button type="primary" @click="addWithdrawCashInit()">提现</a-button>
      </main>
    </a-card>
    <a-card style="margin-top:2%">
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="提现时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['withdrawTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="工单号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['workNumber']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="处理状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['treatmentState']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">待审核</a-select-option>
                <a-select-option :value="2">审核通过</a-select-option>
                <a-select-option :value="3">打款成功</a-select-option>
                <a-select-option :value="4">审核未通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findAgentWithDrawCashPageList()">查询</a-button>
            <a-button type="dashed" @click="listExport()">导出</a-button>
            <a-button htmlType="reset" @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.createTime"
        :bordered="true"
      >
        <template slot="status" slot-scope="text,record">
          <span>{{ record.status==1?"待审核":record.status==2?"审核通过":record.status==3?"打款成功":record.status==4?"审核未通过":''}}</span>
        </template>
      </a-table>
    </a-card>
    <a-modal title="请确认一下信息" :visible="withdrawVisible" @ok="withdrawOk" @cancel="withdrawCancel">
      <div class="okInfo">
        <label for>提现金额：</label>
        <span>{{workOrderAmount}}元</span>
      </div>
      <div class="okInfo">
        <label for>提现手续费：</label>
        <span>{{serviceCharge}}元</span>
      </div>
      <div class="okInfo">
        <label for>银行卡收款人姓名：</label>
        <span>{{bankUserName}}</span>
      </div>
      <div class="okInfo">
        <label for>银行开开户支行：</label>
        <span>{{bankName}}</span>
      </div>
      <div class="okInfo">
        <label for>银行卡收款账号：</label>
        <span>{{receivingAccount}}</span>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "time" },
    align: "center"
  },
  {
    title: "提现单号",
    dataIndex: "workOrderCode",
    scopedSlots: { customRender: "withdrawOrderNumber" },
    align: "center"
  },
  {
    title: "处理状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "收款账户",
    dataIndex: "receivingAccount",
    scopedSlots: { customRender: "gathering" },
    align: "center"
  },
  {
    title: "提现总金额",
    dataIndex: "workOrderAmount",
    scopedSlots: { customRender: "totalMoney" },
    align: "center"
  },
  {
    title: "提现手续费",
    dataIndex: "serviceCharge",
    scopedSlots: { customRender: "serviceCharge" },
    align: "center"
  }
];

const data = [
  {
    key: "1"
  }
];
export default {
  name: "withdrawAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      withdrawVisible: false,
      bankName: "", //收款银行
      bankUserName: "", //收款人姓名
      receivingAccount: "", //收款账号
      serviceCharge: "", //提现手续费
      workOrderAmount: "", //提现金额
      accountBalance: "", //可提现金额
      settledAmount: "" //已提现金额
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findAgentWithDrawCashPageList();
    },
    withdrawOk(e) {
      this.withdrawVisible = false;
      this.addWithdrawCash();
    },
    withdrawCancel(e) {
      this.withdrawVisible = false;
    },

    // 代理商提现初始化
    addWithdrawCashInit() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/addWithdrawCashInit",
        data: {
          loginToken: this.$store.state.loginToken
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.withdrawVisible = true;
          this.bankName = res.data.data.bankName;
          this.bankUserName = res.data.data.bankUserName;
          this.receivingAccount = res.data.data.receivingAccount;
          this.serviceCharge = res.data.data.serviceCharge;
          this.workOrderAmount = res.data.data.workOrderAmount;
        }
      });
    },

    // 代理商提现
    addWithdrawCash() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/addWithdrawCash",
        data: {
          loginToken: this.$store.state.loginToken,
          serviceCharge: this.serviceCharge,
          workOrderAmount: this.workOrderAmount
        }
      }).then(res => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message.info("提现成功");
        }
      });
    },

    // 代理商提现查询
    findAgentWithDrawCashPageList() {
      var values = this.form.getFieldsValue();
      if (values.withdrawTime == undefined) {
        values.withdrawTime == undefined;
      } else {
        this.startTime = moment(values.withdrawTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.withdrawTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/findAgentWithDrawCashPageList",
        data: {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          startTime: this.startTime,
          endTime: this.endTime,
          workOrderCode: values.workNumber,
          status: values.treatmentState,
          type: 2
        }
      }).then(res => {
        console.log(res);
        this.data = res.data.data.t.list;
        this.accountBalance = res.data.data.t.accountBalance;
        this.settledAmount = res.data.data.t.settledAmount;
        this.pagination.total = res.data.data.total;
        this.pagination.pageSize = res.data.data.pageSize;
        this.pagination.current = res.data.data.pageNum;
      });
    },

    // 代理商工单导出
    listExport() {
      var values = this.form.getFieldsValue();
      if (values.withdrawTime == undefined) {
        values.withdrawTime == undefined;
      } else {
        this.startTime = moment(values.withdrawTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.withdrawTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios({
        method: "post",
        url: this.baseUrl + "/financial/exportAgentWithDrawCashList",
        data: {
          loginToken: this.$store.state.loginToken,
          startTime: this.startTime,
          endTime: this.endTime,
          workOrderCode: values.workNumber,
          status: values.treatmentState,
          type: 2
        },
        responseType: "arraybuffer"
      }).then(res => {
        // console.log(res);
        if (res.status == "200") {
          const aLink = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          aLink.href = URL.createObjectURL(blob);
          aLink.download = "代理商提现表";
          aLink.click();
          document.body.appendChild(aLink);
        }
      });
    }
  },
  created() {
    this.findAgentWithDrawCashPageList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.withdrawAdmin {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
section {
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section div {
  margin-left: 10%;
  height: 80px;
}
section div:nth-of-type(2) {
  border-left: 1px solid gray;
  padding-left: 10%;
}
section div p:nth-of-type(1) {
  font-size: 1.1em;
}
section div p:nth-of-type(2) {
  font-size: 1.8em;
}
main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.okInfo {
  margin: 4% 0;
}
.okInfo:nth-of-type(1),
.okInfo:nth-last-of-type(1) {
  margin: 0;
}
.okInfo span {
  margin-left: 2%;
}
</style>
